<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项dataZoom-区域缩放</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1, #chart2 {
      width: 100%;
      height: 600px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>
<body>
  <div id="chart1"></div>

  <script>
    var data1 = []
    var data2 = []
    var data3 = []

    function random (max) {
      return (Math.random() * max).toFixed(3)
    }
    for (var i = 0; i < 500; i++) {
      data1.push([random(15), random(10), random(1)])
      data2.push([random(10), random(10), random(1)])
      data3.push([random(15), random(10), random(1)])
    }

    const myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption({
      title: {
        text: 'dataZoom-区域缩放',
      },
      animation: false, // 不开启动画
      legend: {},
      xAxis: {},
      yAxis: {},
      dataZoom: [
        {
          id: 'dataZoomX',
          type: 'inside', // 加上这个属性就可以缩放了(拖拽、滚轮缩放)
          disabled: false,
          xAxisIndex: 0, // 多条x轴时，控制哪个
          // filterMode: 'empty'
          start: 10,
          end: 50,
          orient: 'vertical',
          zoomLock: false,
          zoomOnMouseWheel: true,
          moveOnMouseMove: true,
        },
        {
          id: 'dataZoomY',
          type: 'inside', // 加上这个属性就可以缩放了(拖拽、滚轮缩放)
          disabled: false,
          yAxisIndex: [0], // 多条y轴时，控制哪个
          zoomLock: false,
          start: 10,
          end: 30,
        },
        {
          type: 'slider', // 滑动条型数据区域缩放
          yAxisIndex: 0,
          dataBackground: {
            lineStyle: {
              color: 'blue',
            },
            areaStyle: {
              color: 'pink',
            },
          },
        },
        {
          type: 'slider', // 滑动条型数据区域缩放
          xAxisIndex: 0,
          dataBackground: {
            lineStyle: {
              color: 'blue',
            },
            areaStyle: {
              color: 'pink',
            },
          },
        },
      ],
      series: [
        {
          name: '钢铁',
          type: 'scatter',
          data: data1,
          symbolSize(val) { return val[2] * 40 },
        },
        {
          name: '石油',
          type: 'scatter',
          data: data2,
          symbolSize(val) { return val[2] * 40 },
        },
        {
          name: '煤炭',
          type: 'scatter',
          data: data3,
          symbolSize(val) {  return val[2] * 40 },
        },
      ],
    })
  </script>
</body>
</html>